<form #extendForm="ngForm">
    <div class="row" *ngFor="let items of _attrs">
        <div
            class="form-group col"
            [ngStyle]="{
                'max-width': extension.type === 8 ? '100%' : _w,
                flex: extension.type === 8 ? '0 0 100%' : '0 0 ' + _w
            }"
            *ngFor="let extension of items"
        >
            <div [ngSwitch]="extension.type" style="width: 100%">
                <div *ngSwitchCase="1">
                    <label for="{{ extension.key }}"
                        >{{ extension.title }}
                        <span class="text-danger" *ngIf="extension.required">*</span>
                    </label>
                    <input
                        [absIf]="extension.isAbs"
                        id="{{ extension.key }}"
                        #numberInput="ngModel"
                        type="number"
                        name="{{ extension.key }}"
                        class="form-control"
                        (change)="converToNumber(extension.key)"
                        [(ngModel)]="_dto[extension.key]"
                        [required]="extension.required"
                        [disabled]="extension.readonly"
                    />
                    <validation-messages [formCtrl]="numberInput"></validation-messages>
                </div>

                <div *ngSwitchCase="2">
                    <label for="{{ extension.key }}"
                        >{{ extension.title }}
                        <span class="text-danger" *ngIf="extension.required">*</span>
                    </label>
                    <input
                        id="{{ extension.key }}"
                        #textInput="ngModel"
                        type="text"
                        name="{{ extension.key }}"
                        class="form-control"
                        [(ngModel)]="_dto[extension.key]"
                        [required]="extension.required"
                        [disabled]="extension.readonly"
                    />
                    <validation-messages [formCtrl]="textInput"></validation-messages>
                </div>

                <div *ngSwitchCase="3">
                    <div class="m-checkbox-list">
                        <label>&nbsp;</label>
                        <label for="{{ extension.key }}" class="m-checkbox">
                            <input
                                id="{{ extension.key }}"
                                type="checkbox"
                                name="{{ extension.key }}"
                                [(ngModel)]="_dto[extension.key]"
                                [required]="extension.required"
                                [disabled]="extension.readonly"
                            />
                            {{ extension.title }}
                            <span class="text-danger" *ngIf="extension.required">*</span>
                            <span></span>
                        </label>
                    </div>
                </div>

                <div *ngSwitchCase="4">
                    <label>{{ extension.title }} <span class="text-danger" *ngIf="extension.required">*</span></label>
                    <camc-dropdown
                        [options]="_optionAll[extension.key + 'Options']"
                        name="{{ extension.key }}"
                        [(ngModel)]="_dto[extension.key]"
                        [style]="{ width: '100%', padding: '0.4rem 0.5rem' }"
                        styleClass="form-control"
                        filter="true"
                        [required]="extension.required"
                        [disabled]="extension.readonly"
                    >
                    </camc-dropdown>
                </div>
                <div *ngSwitchCase="5">
                    <label>{{ extension.title }}<span class="text-danger" *ngIf="extension.required">*</span> </label>
                    <camc-multiSelect
                        [options]="_optionAll[extension.key + 'Options']"
                        name="{{ extension.key }}"
                        [(ngModel)]="_dto[extension.key]"
                        [style]="{ width: '100%' }"
                        styleClass="form-control"
                        [required]="extension.required"
                        [disabled]="extension.readonly"
                        defaultLabel = "请选择"
                    >
                    </camc-multiSelect>
                </div>
                <div *ngSwitchCase="6">
                    <label>{{ extension.title }} <span class="text-danger" *ngIf="extension.required">*</span></label>
                    <div style="width: 100%">
                        <p-calendar
                            [ngModel]="_dto[extension.key + '_Date']"
                            (ngModelChange)="dateChange($event, extension.key)"
                            name="{{ extension.key }}"
                            dateFormat="yy-mm-dd"
                            [inputStyleClass]="'form-control'"
                            [locale]="calendarHelper.cn"
                            [inputStyleClass]="'form-control'"
                            [style]="{ width: '100%' }"
                            [inputStyle]="{ width: '100%' }"
                            [required]="extension.required"
                            [disabled]="extension.readonly"
                        ></p-calendar>
                    </div>
                </div>

                <div *ngSwitchCase="7">
                    <label>{{ extension.title }} <span class="text-danger" *ngIf="extension.required">*</span></label>
                    <div style="width: 100%">
                        <p-calendar
                            [ngModel)="_dto[extension.key + '_Date']"
                            (ngModelChange)="dateChange($event, extension.key)"
                            showTime="true"
                            name="{{ extension.key }}"
                            dateFormat="yy-mm-dd"
                            [inputStyleClass]="'form-control'"
                            [locale]="calendarHelper.cn"
                            [inputStyleClass]="'form-control'"
                            [style]="{ width: '100%' }"
                            [inputStyle]="{ width: '100%' }"
                            [required]="extension.required"
                            [disabled]="extension.readonly"
                        ></p-calendar>
                    </div>
                </div>

                <div *ngSwitchCase="8">
                    <label for="{{ extension.key }}"
                        >{{ extension.title }} <span class="text-danger" *ngIf="extension.required">*</span></label
                    >

                    <textarea
                        id="{{ extension.key }}"
                        #textareaInput="ngModel"
                        class="form-control"
                        name="{{ extension.key }}"
                        rows="3"
                        [(ngModel)]="_dto[extension.key]"
                        [required]="extension.required"
                        [disabled]="extension.readonly"
                        style="width: 100%;"
                    ></textarea>
                    <validation-messages [formCtrl]="textareaInput"></validation-messages>
                </div>

                <div *ngSwitchCase="9">
                    <label for="{{ extension.key }}"
                        >{{ extension.title }}
                        <span class="text-danger" *ngIf="extension.required">*</span>
                    </label>
                    <input
                        [absIf]="extension.isAbs"
                        id="{{ extension.key }}"
                        #numberInput="ngModel"
                        (change)="converToInt(extension.key)"
                        type="number"
                        name="{{ extension.key }}"
                        class="form-control"
                        [(ngModel)]="_dto[extension.key]"
                        [required]="extension.required"
                        [disabled]="extension.readonly"
                    />
                    <validation-messages [formCtrl]="numberInput"></validation-messages>
                </div>
            </div>
        </div>
    </div>
</form>
